<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>个人页面-付款详细</title>
    <link rel="stylesheet" href="static/css/pc/minCss/all.min.css" />

    <!--IE浏览器运行最新的渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap -->
    <link rel="stylesheet" href="static/css/pc/minCss/bootstrap.min.css" />
    <link rel="stylesheet" href="static/css/pc/minCss/all.min.css" />
    <link rel="stylesheet" href="./static/ickeckSkins/minimal/grey.css" />

    <!--[if lt IE 9]>
    <script src="static/js/pc/dest/html5shiv.min.js"></script>
    <script src="static/js/pc/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="header" style="height: 95px;"></div>

<div id="per-payInfo">
    <div class="per-payInfo-order">
        <div class="row">
            <div class="col-md-6"><p class="per-payInfo-orderId">订单号：23456789045</p></div>
            <div class="col-md-6"><p class="per-payInfo-orderTime">创建时间：2016.5.31 20:34</p></div>
        </div>
        <div class="row">
            <div class="col-md-8"><p class="per-payInfo-orderTit">需求名称需求名称需求名...</p></div>
            <div class="col-md-4"><p class="per-payInfo-orderStatus">已交保证金</p></div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="per-payInfo-des">需求说明：这里显示的是需求的说明这里显示的是需求的说明这里显示的是需求的说明这里显示的是需求的说明这里...</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6"><p class="per-payInfo-orderZJ">征集作品</p></div>
            <div class="col-md-6"><p class="per-payInfo-orderSC">20天19小时</p></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 per-payInfo-amount">
            总计金额<span></span>RMB<span></span>1,234
        </div>
    </div>
    <form action="" class="form-horizontal zcbl-form-horizontal">
    <div class="per-payInfo-type">
        <div class="per-recharge-tit">支付方式</div>
        <div class="per-recharge-payType" id="payType">
            <label class="radio-inline per-recharge-radio">
                <input type="radio" name="payType" value="option1" class="input-img" />
                <span class="pr5"></span><img src="static/images/pc/personal/alipay.png" height="52" width="52" alt="" />
            </label>
            <label class="radio-inline per-recharge-radio">
                <input type="radio" name="payType" value="option1" class="input-img" />
                <span class="pr5"><img src="static/images/pc/personal/weChatPay.png" height="52" width="52" alt="" />
            </label>
            <label class="radio-inline per-recharge-radio">
                <input type="radio" name="payType" value="option1" />
                <span class="pr5">账户余额 <span class="account-balance">（10元）</span>
            </label>
        </div>
    </div>
    <div class="row mt25">
        <div class="col-md-12">
            <button type="button" class="btn-yellow-50 right" data-toggle="modal" data-target="#noBalance">立即支付</button>
        </div>
    </div>
    </form>
</div>



<div id="footer"></div>


<!--余额不足-->
<div class="modal fade" id="noBalance"  aria-hidden="true">
    <button type="button" class="close zcbl-close" data-dismiss="modal" aria-hidden="true"></button>
    <div class="zcbl-modal-3 zcbl-modalHei285">
        <div class="zcbl-modal-tit">
            余额不足
        </div>
        <div class="zcbl-modal-3-con">
            <p class="zcbl-modal-3-desc">您的余额不足，请到 <a href="./personal-artwork-pic.html" target="_self">“个人中心”</a>充值，或者使用第三方支付</p>
        </div>
        <div class="clear"></div>
        <div class="zcbl-popupBtn">
            <button type="submit" class="btn-yellow-50 left mr25" data-dismiss="modal">充值</button>
            <button type="button" class="zcbl-modal-cancel" data-dismiss="modal">更换支付方式</button>
        </div>
    </div>
</div>
<!--余额不足-->





<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="static/js/pc/dest/jquery-1.11.3.min.js"></script>

<script src="static/js/pc/dest/all.min.js"></script>
<script src="static/ickeckSkins/icheck.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="static/js/pc/dest/bootstrap.min.js"></script>
<script>
    //搜索radio按钮样式
    $(document).ready(function(){
        $('#payType input').iCheck({
            radioClass: 'iradio-grey-16',
            increaseArea: '30%' // optional
        });
    });
</script>
</body>
</html>